<template>
    <div  class="register">
      <el-form :model="registerFrom" :rules="registerRules" ref="registerForm" class="login_form"
        :label-position="labelPosition" label-width="80px">
        <h1>注册</h1>
        <el-form-item label="请输入常用手机号" prop="Phone_Number">
          <el-input v-model="registerFrom.Phone_Number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="Password">
          <el-input v-model="registerFrom.Password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="registerFrom.checkPass"></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="primary" round @click="register('registerForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import axios from "../../request/request.js";
export default {
   name:"RegisterView",
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('电话号码'));
        } else {
          if (value === 11) {
            callback(new Error('手机号码格式错误'));

          } else {
            callback();
          }
        }
      }, 1000);
    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'));
      } else if (value !== this.registerFrom.Password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      registerFrom: {
        Phone_Number: "",
        Password: '',
        checkPass: '',
      },
  
      registerRules: {
        Phone_Number: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        Password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    register() {
      axios
        .post('api/User/Register', this.registerFrom)
        .then(function (res) {
          console.log(res);
          if (res.data.statusCode == 200) {
            this.$message({
              message: "注册成功",
              type: "success"
            })
        
          }
    
        }).catch(function (error) {
          console.log(error);
        });
    },

  },

}

</script>
